import React, { memo } from 'react'
import { Left3Warpper } from './style'
import CustomContainerHeader from '@/components/custom-container-header/index'
import Left3DustMonitorIcon from '@/assets/img/left3-dustmonitor-icon.png'
import Left3SJKIcon from '@/assets/img/left3-sjk-icon.png'
import Left3LifterIcon from '@/assets/img/left3-lifter-icon.png'
const Left3 = memo((props) => {
    const data = [
        {
            title: "扬尘监测",
            icon: Left3DustMonitorIcon,
            color: "#FF577B",
            subTitle: "告警项目数",
            value: 2378,
            id: 1
        },
        {
            title: "起重机械",
            icon: Left3LifterIcon,
            color: "#fff",
            subTitle: "已安装设备项目数",
            value: 2378,
            id: 2
        },
        {
            title: "深基坑",
            icon: Left3SJKIcon,
            color: "#fff",
            subTitle: "深基坑项目数",
            value: 2378,
            id: 3
        },
    ]
    return (
        <Left3Warpper>
            <CustomContainerHeader defaultSlot={'物联网设备'} clickRightHandle={e => { console.log('点击了详情页') }} />
            <div className="content">
                {data?.map(item => {
                    return <div key={item.id} className='item-container'>
                        <div className="header">
                            <span className='title'>{item.title}</span>
                        </div>
                        <div className="icon">
                            <img src={item.icon} alt="" />
                        </div>
                        <div className="num" style={{ color: item.color }}>{item.value}</div>
                        <div className="sub-title">{item.subTitle}</div>
                    </div>
                })}
            </div>
        </Left3Warpper>
    )
})



export default Left3